<template>
  <div class="todo-input">
    <el-input
      v-model="input"
      placeholder="添加新的待办事项..."
      @keyup.enter="onAdd"
      clearable
      class="input-box"
    >
      <template #prefix>
        <el-icon><Edit /></el-icon>
      </template>
    </el-input>
    <el-button
      type="primary"
      :disabled="!input.trim()"
      @click="onAdd"
      class="add-btn"
      circle
    >
      <el-icon><Plus /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Plus } from '@element-plus/icons-vue'
const input = ref('')
const emit = defineEmits(['add'])
function onAdd() {
  if (!input.value.trim()) return
  emit('add', input.value.trim())
  input.value = ''
}
</script>

<style scoped>
.todo-input {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  transition: background var(--transition);
}
.input-box {
  flex: 1;
}
.add-btn {
  transition: box-shadow var(--transition), background var(--transition);
}
.add-btn:active {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
</style> 